import classNames from 'classnames'
import { ReactNode } from 'react'
import styels from './index.module.scss'

interface Props
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  className?: string
  extra?: ReactNode
  errMsg?: string
}

export default function Input({ extra, errMsg, className, ...rest }: Props) {
  return (
    <div className={styels.root}>
      <input className={classNames('input', className)} {...rest} />
      {errMsg ? <div className='validate'>{errMsg}</div> : null}
      {extra ? <div className='extra'>{extra}</div> : null}
    </div>
  )
}
